<template>
  <view class="goodsItem u-flex">
    <!-- 左 -->
    <!-- <u-checkbox shape="circle" v-model="item.isChecked"></u-checkbox> -->
    <u-checkbox shape="circle" :value="item.isChecked" @input="toggleChecked(item.goods_id)"></u-checkbox>
    <!-- 中 -->
    <u-image :src="item.pic" width="190" height="190"></u-image>
    <!-- 右 -->
    <view class="info u-flex">
      <navigator :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`" class="top u-line-2">{{item.goods_name}}</navigator>
      <view class="bottom u-flex">
        <view class="price">￥ {{item.goods_price}}</view>
        <view class="number u-flex">
          <u-icon size="40" @click="minusHandler" name="minus-circle"></u-icon>
          <view class="shuzi">{{item.number}}</view>
          <u-icon size="40" @click="setGoodsNumber({goods_id: item.goods_id, number: item.number + 1})" name="plus-circle"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {mapMutations} from 'vuex'
  export default {
    props: {
      item: {
        type: Object,
        required: true
      }
    },
    methods: {
      ...mapMutations('cart', ['setGoodsNumber', 'removeGoods','toggleChecked']),
      async minusHandler() {
        if (this.item.number > 1) {
          this.setGoodsNumber({
            goods_id: this.item.goods_id, 
            number: this.item.number - 1
          })
        }else {
          // 如果已经减到1了
          console.log('不能再减少');
          const [err, data] = await uni.showModal({
            content: '是否确认删除?'
          })
          if (!err && data.confirm) {
            // 用户点了确认
            console.log('用户点了  ok');
            this.removeGoods(this.item.goods_id)
          }
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
.goodsList { 
  padding: 34rpx;
}
.goodsItem {
  margin: 0 0 20rpx;
}
.info {
  flex: 1;
  margin-left: 20rpx;
  flex-direction: column;
  height: 190rpx;
  padding: 26rpx 0;
  justify-content: space-between;
  .top {
    width: 100%;
    font-size: 24rpx;
  }
  .bottom {
    width: 100%;
    justify-content: space-between;
    .price {
      color: $theme-color;
      font-size: 24rpx;
    }
    .number {
      font-size: 32rpx;
      .shuzi {
        margin: 0 10rpx;
      }
    }
  }
}
</style>